// function qs(ele) {
//     return document.querySelector(ele)
// }




//简写  箭头函数封装函数
const qs = (element) => document.querySelector(element)

//请求根路径
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'

async function init() {
  const { data: res } = await axios.get('/city/province')
  console.log(res.dsta);
  const provinceStr = res.data.map((item) => `<option value="${item.province}">${item.name}</option>`).join('')
  console.log(provinceStr);
  qs('#province').innerHTML = '<option value="">请选择省份</option>' + provinceStr

  qs('#province').value = '34'




  const {
    data: { data: cityData },
  } = await axios.get('/city/city', {
    params: {
      provinceCode: '34'
    }
  })
  const cityStr = cityData.map((item) => `
  <option value="${item.city}">${item.name}</option>
  `).join('')
  qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
  qs('#city').value = '01'



  const {
    data: { data: areaData },
  } = await axios.get('/city/area', {
    params: {
      provinceCode: '34',
      cityCode: '01'
    }
  })
  const areaStr = areaData.map((item) => `
  <option value="${item.area}">${item.name}</option>
  `).join('')
  qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr
  qs('#county').value = '02'


}
init()

qs('#province').addEventListener('change', async function () {

  console.log(this.value);

  const {
    data: { data: cityData },
  } = await axios.get('/city/city', {
    params: {
      provinceCode: this.value,
    }
  })
  const cityStr = cityData.map((item) => `
  <option value="${item.city}">${item.name}</option>
  `).join('')
  qs('#city').innerHTML = '<option value="">请选择城市</option>' + cityStr
  qs('#county').innerHTML = '<option value="">请选择区县</option>'



  qs('#city').addEventListener('change', async function () {

    console.log(this.value);

    const {
      data: { data: areaData },
    } = await axios.get('/city/area', {
      params: {
        provinceCode: qs('#province').value,
        cityCode: this.value
      }
    })
    const areaStr = areaData.map((item) => `
      <option value="${item.area}">${item.name}</option>
      `).join('')
    qs('#county').innerHTML = '<option value="">请选择区县</option>' + areaStr

  })


})